<script setup>
import { useRoute,RouterView } from 'vue-router'
import { ref } from 'vue';

import HOME_ONE from '@/assets/首页1.png'
import HOME_TWO from '@/assets/首页2.png'
import HOME_ONE1 from '@/assets/分类1.png'
import HOME_TWO1 from '@/assets/分类2.png'
import HOME_ONE2 from '@/assets/花友圈1.png'
import HOME_TWO2 from '@/assets/花友圈2.png'
import HOME_ONE3 from '@/assets/订单1.png'
import HOME_TWO3 from '@/assets/订单2.png'
import HOME_ONE4 from '@/assets/我的1.png'
import HOME_TWO4 from '@/assets/我的2.png'

const route = useRoute();
// 2、做点数据结构，用于页面v-for遍历用
const active = ref(0);
const tabBar = [
  {
    title: '首页',
    to: {
      name: 'home',
    },
    icon: HOME_ONE, // 默认
    icon_acitve: HOME_TWO, // 选中
  },
  {
    title: '分类',
    to: {
      name: 'about',
    },
    icon: HOME_ONE1, // 默认
    icon_acitve: HOME_TWO1, // 选中
  },
  {
    title: '花友圈',
    to: {
      name: 'flower',
    },
    icon: HOME_ONE2, // 默认
    icon_acitve: HOME_TWO2, // 选中
  },
  {
    title: '订单',
    to: {
      name: 'order',
    },
    icon: HOME_ONE3, // 默认
    icon_acitve: HOME_TWO3, // 选中
  },
  {
    title: '我的',
    to: {
      name: 'mine',
    },
    icon: HOME_ONE4, // 默认
    icon_acitve: HOME_TWO4, // 选中
  }
]
</script>

<template>
  <div>
    <router-view />
    <van-tabbar route v-model="active" active-color="#f85e66" v-if="!route.meta.hideTabBar">
      <van-tabbar-item v-for="(item, index) in tabBar" :key="index" :to="item.to">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon_acitve : item.icon" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/about">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/flower" icon="friends-o">花友圈</van-tabbar-item>
      <van-tabbar-item replace to="/order" icon="setting-o">订单</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="setting-o">我的</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<style lang="scss"></style>
